<template>
  <div class="box">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础信息" name="first">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 标题 -->
          <el-form-item label="标题" required>
            <el-input
              v-model="ruleForm.title"
              placeholder="请输入标题"
              style="width: 500px"
            />
          </el-form-item>
          <el-row type="flex" justify="space-eventy">
            <!-- 作者 -->
            <el-form-item label="作者" required>
              <el-input v-model="ruleForm.author" />
            </el-form-item>
            <!-- 分类 -->
            <el-form-item label="分类" required>
              <el-select v-model="ruleForm.cateid" placeholder="请选择">
                <el-option
                  v-for="item in listCate"
                  :key="item.id"
                  :label="item.catename"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-row>
          <el-row type="flex" justify="space-eventy">
            <!-- 阅读次数 -->
            <el-form-item required label="阅读次数">
              <el-input-number
                v-model="ruleForm.click"
                :min="1"
                :max="10000"
                label="描述文字"
                @change="handleChange"
              />
            </el-form-item>
            <!-- 创建时间 -->
            <el-form-item
              v-model="ruleForm.create_date"
              required
              label="创建时间"
            >
              <el-date-picker
                v-model="valueTime"
                type="datetime"
                placeholder="选择日期时间"
                @change="changeTime"
              />
            </el-form-item>
          </el-row>

          <el-row type="flex" justify="space-eventy">
            <!-- 是否推荐 -->
            <el-form-item required label="是否推荐">
              <el-switch
                ref="awitch"
                v-model="isHot"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
                @change="changeHot"
              />
            </el-form-item>
            <!-- 是否置顶 -->
            <el-form-item required label="是否置顶">
              <el-switch
                ref="awitch"
                v-model="isTop"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
                @change="changeTop"
              />
            </el-form-item>
          </el-row>
          <!-- 收藏数量 -->
          <el-form-item required label="收藏数量">
            <el-input
              v-model="ruleForm.lovenum"
              type=""
              placeholder="请输入收藏数量名称"
              style="width: 160px"
            />
          </el-form-item>
          <!-- 上传图片 -->
          <el-form-item required label="文章缩略图">
            <el-upload
              class="upload-demo"
              action=""
              :http-request="httpRequest"
              :file-list="fileList"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <!-- 标签 -->
          <el-form-item required label="文章标签">
            <el-checkbox-group v-model="checkedList" @change="changeTag">
              <el-checkbox v-for="item in checkList" :key="item.id" :label="item.tagname">{{ item.tagname }}</el-checkbox>
            </el-checkbox-group></el-form-item>
          <el-form-item>
            <el-button type="success" @click="onSubmit">立即发布</el-button>
            <el-button type="primary">保存草稿</el-button>
            <el-button type="info" @click="$router.push('/content_article')">返回列表</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="SEO信息" name="second">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="seo关键字" required>
            <el-input
              v-model="ruleForm.keywords"
              placeholder="请输入seo关键字名称"
              style="width: 300px"
              type="textarea"
              :rows="3"
            />
          </el-form-item><el-form-item label="seo的描述" required>
            <el-input
              v-model="ruleForm.description"
              placeholder="请输入seo的描述"
              style="width: 300px"
              type="textarea"
              :rows="3"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="onSubmit">立即发布</el-button>
            <el-button type="primary">保存草稿</el-button>
            <el-button type="info">返回列表</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="文章内容" name="three">
        <quillEditor
          v-model="ruleForm.content"
          class="editor"
        />
        <el-button type="success" @click="onSubmit">立即发布</el-button>
        <el-button type="primary">保存草稿</el-button>
        <el-button type="info">返回列表</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { uploadImg } from '@/api/user'
import { getCateAll, getTagAll, addyddArticleInfoApi, updateyddArticleInfoApi, getyddArticleInfoApi } from '@/api/ydd_article'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// import bus from '@/common/bus'
export default {
  name: 'ArticleInfo',
  components: { quillEditor },
  data() {
    return {
      checkList: [],
      checkedList: [],
      fileList: [],
      isHot: '',
      isTop: '',
      num: 1, // 阅读次数
      valueTime: '', // 时间
      listCate: [],
      activeName: 'first',
      ruleForm: {
        author: '', // 作者
        cateid: '', // 分类id
        click: 1, // 阅读次数
        content: '', // 内容
        create_date: '', // 创建时间
        description: '', // 描述
        ishot: 0, // 热门
        istop: 0, // 置顶
        keywords: '', // 关键字
        lovenum: '', // 收藏
        pic: '', // 图片
        status: 1,
        tags: '', // 标签
        title: '' // 标题
      }
      // rules: {
      //   name: [
      //     { required: true, message: '请输入活动名称', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ],
      //   region: [
      //     { required: true, message: '请选择活动区域', trigger: 'change' }
      //   ],
      //   date1: [
      //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
      //   ],
      //   date2: [
      //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
      //   ],
      //   type: [
      //     { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
      //   ],
      //   resource: [
      //     { required: true, message: '请选择活动资源', trigger: 'change' }
      //   ],
      //   desc: [
      //     { required: true, message: '请填写活动形式', trigger: 'blur' }
      //   ]
      // }
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    }
  },
  // mounted() {
  //   bus.$on('Info', (res) => {
  //     console.log(res)
  //     this.ruleForm = [...res]
  //   })
  // },
  created() {
    this.getCateList()
    this.getTagAll()
    this.id ? this.initData() : ''
  },
  methods: {
    changeTag(val) {
      this.ruleForm.tags = [...val]
    },
    changeTime(val) {
      this.ruleForm.create_date = this.timeToTimestamp(val)
    },
    changeHot(val) {
      this.ruleForm.ishot = val
    },
    changeTop(val) {
      this.ruleForm.istop = val
    },
    handleChange(val) {
      this.ruleForm.click = val
    },
    async httpRequest(result) {
      const fd = new FormData()
      fd.append('file', result.file)
      const res = await uploadImg(fd)
      this.ruleForm.pic = res.savePath
    },
    async getCateList() {
      const res1 = await getCateAll()
      // console.log(res1)
      this.listCate = res1
    },
    async getTagAll() {
      const res = await getTagAll()
      this.checkList = res
    },
    async onSubmit() {
      // 表单的校验
      await this.$refs.ruleForm.validate()
      // this.formData.role_id = this.checkListed.map(item => item.id)
      // 请求的发生
      this.ruleForm.id ? await updateyddArticleInfoApi(this.ruleForm) : await addyddArticleInfoApi(this.ruleForm)
      // 提示效果
      this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功')
      this.$router.push('/content_article')
    },
    async initData() {
      const res = await getyddArticleInfoApi({ id: this.id })
      console.log(res)
      this.ruleForm = res
      this.isHot = res.ishot
      this.isTop = res.istop
      this.checkedList = res.tags.split(',')
      this.valueTime = this.timestampToTime(res.create_date)
    }
  },
  timestampToTime(timestamp) {
    timestamp = timestamp || null
    const date = new Date(timestamp)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
    const Y = date.getFullYear() + '-'
    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
    const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
    const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
    const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    return Y + M + D + h + m + s
  },
  timeToTimestamp(time) {
    const timestamp = Date.parse(new Date(time).toString())
    // timestamp = timestamp / 1000; //时间戳为13位需除1000，时间戳为13位的话不需除1000
    console.log(time + '的时间戳为：' + timestamp)
    return timestamp
  }
}

</script>
<style>
.editor{
  width: 800px;
  height: 300px;
}

</style>
